<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商品</title>

</head>

<body>


<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="${pageContext.request.contextPath}/css2/bootstrap.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
<script src="${pageContext.request.contextPath}/jquery/jquery.cookie.js"></script>

<script src="${pageContext.request.contextPath}/js2/bootstrap.js"></script>

<div class="mt-5 ">
    <div class="container"/>
    <table class="table table-striped table-hover">
        <div class="form-group mb-2">
            <input type="text" id="searchname" placeholder="请输入商品名称">
            <a id="btn" class="btn btn-info btn-sm mb-1" href="javascript:;" onclick="searchGood()">搜索</a>
        </div>
        <a class="btn btn-primary btn-sm mb-2" href="javascript:;" onclick="addGoods()">添加商品</a>

        <thead>
        <tr>
            <th>ID</th>
            <th>商图</th>
            <th>商名</th>
            <th>商品详情</th>
            <th>状态</th>
            <th>分类</th>
            <th>属性列表</th>
            <th>单价</th>
            <th>库存</th>
            <th>折扣</th>
            <th>删除标记</th>
            <th>添加时间</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${GoodsData.list}" var="one">

            <tr>
                <td>${one.goodsId}</td>
                <td><a href="#" onclick="eidtpic(${one.goodsId})"> <img title="点击更换图片" style="width: 100px"
                                                                        src="${pageContext.request.contextPath}/img/${one.goodsPic}"></a>
                </td>
                <td>
                        ${one.goodsName}


                </td>
                <td>${one.goodsDesc}</td>
                <td>${one.goodsStatus}</td>
                <td>
                    <c:forEach items="${TypeMap}" var="ones">
                        <c:if test="${one.typeId==ones.id}">

                            ${ones.brand}

                        </c:if>
                    </c:forEach>
                </td>
                <td>${one.attributeList}</td>
                <td>${one.goodPrice}</td>
                <td>${one.goodsStock}</td>
                <td>${one.discount}</td>
                <td>${one.deleted}</td>
                <td>${one.createTime}</td>
                <td>${one.updateTime}</td>
                <td><a class="btn btn-primary btn-sm mb-2 " href="javascript:;" onclick="edit(${one.goodsId})">修改</a><a
                        class="btn btn-primary btn-sm " href="javascript:;" onclick="deleteGoods(${one.goodsId})">删除</a>

                        <%-- <a class="btn btn-info btn-sm " href="javascript:;" onclick="deleteGoods(${one.goodsId})">删除</a>--%>
                    <a class="btn btn-info btn-sm " href="javascript:;" onclick="addGoods(${one.goodsId})">添加</a>
                    <a class="btn btn-info btn-sm " href="javascript:;" onclick="shopGoods(${one.goodsId})">购买</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
        <tfoot></tfoot>
    </table>

    <hr>
    <div style="font-size: large">
        <span>当前是第${GoodsData.currentPage}页</span><span>,共${GoodsData.totalPage}页</span></span>
        <span>,共${GoodsData.totalSize}条记录</span>
    </div>
    <div>
        <a class="btn btn-info" onclick="firstPage()">首页</a>
        <a class="btn btn-success" onclick="previousPage()">上一页</a>
        <a class="btn btn-success" onclick="nextPage()">下一页</a>
        <a class="btn btn-info" onclick="lastPage()">尾页</a>

    </div>

    <!-编辑商品->
    <div class="modal fade" id="editModal">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel2">修改商品</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table">
                        <div class="form-group">
                            <lable>ID</lable>
                            <input type="text" name="id" id="eidtid" class="form-control" readonly>
                        </div>

                        <div class="form-group">
                            <lable>图片</lable>
                            <input type="text" name="picture" id="eidtpicture" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>商品名称</lable>
                            <input type="text" name="goodname" id="eidtgoodname" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>商品详情</lable>
                            <input type="text" name="description" id="eidtdescription" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>状态</lable>
                            <input type="text" name="state" id="eidtstate" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>分类</lable>
                            <input type="text" name="type" id="eidttype" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>属性</lable>
                            <input type="text" name="attribute" id="eidtattribute" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>单价</lable>
                            <input type="text" name="price" id="eidtprice" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>库存</lable>
                            <input type="text" name="stock" id="eidtstock" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>折扣</lable>
                            <input type="text" name="discount" id="eidtdiscount" class="form-control">
                        </div>


                        <div class="form-group">
                            <lable>添加时间</lable>
                            <input type="text" name="createtime" id="editcreatetime" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>更新时间</lable>
                            <input type="text" name="upadatetime" id="editupdatetime" class="form-control">
                        </div>

                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="edit_do()">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-添加商品->
<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel2">添加书籍</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="table">

                        <div class="form-group">
                            <lable>ID</lable>
                            <input type="text" name="id" id="addId" class="form-control" readonly>
                        </div>

                        <div class="form-group">
                            <lable>图片</lable>
                            <input type="file" name="picture" id="file" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>商品名称</lable>
                            <input type="text" name="goodname" id="addGoodsName" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>商品详情</lable>
                            <input type="text" name="description" id="addDescription" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>状态</lable>
                            <input type="text" name="state" id="addStatus" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>分类</lable>
                            <input type="text" name="type" id="addType" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>属性</lable>
                            <input type="text" name="attribute" id="addAttribute" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>单价</lable>
                            <input type="text" name="price" id="addPrice" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>库存</lable>
                            <input type="text" name="stock" id="addStock" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>折扣</lable>
                            <input type="text" name="discount" id="addDiscount" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>删除标记</lable>
                            <input type="text" name="deleted" id="addDeleted" class="form-control">
                        </div>
                        <div class="form-group">
                            <lable>添加时间</lable>
                            <input type="text" name="createtime" id="addCreatetime" class="form-control">
                        </div>

                        <div class="form-group">
                            <lable>更新时间</lable>
                            <input type="text" name="upadatetime" id="addUpdatetime" class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="add_do()">提交</button>
            </div>
        </div>
    </div>
</div>
</div>

<!-修改图片->
<div class="modal fade" id="picModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ModalLabel">修改图片</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="reload()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalbody">
                <input type='file' name='picture' id="picture" class='form-control'>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="reload()">取消</button>
                <button type="button" class="btn btn-primary" onclick="savePicture()">提交</button>
            </div>
        </div>
    </div>
</div>
</div>
<%--分页查询  商品修改--%>
<script>
    function reload(){
        location.reload();

    }

    $("#searchname").val($.cookie("input_value"))
    var totalPages =${GoodsData.totalPage};
    var currentPage =${GoodsData.currentPage};
    var pagesize =${GoodsData.pageSize};

    //分页
    function searchGood() {
        var search = $("#searchname").val()
        $.cookie("input_value", search)
        currentPage = 1;
        pageChange();
    }

    function firstPage() {
        if (currentPage != 1) {
            currentPage = 1;
            pageChange()
        }
    }

    function lastPage() {
        if (currentPage != totalPages) {

            currentPage = totalPages
            pageChange()
        }

    }
    function nextPage() {
        if (currentPage < totalPages) {
            currentPage++;
            pageChange()
        }
    }
    function previousPage() {
        if (currentPage > 1) {
            currentPage--;
            pageChange()
        }
    }

    function pageChange() {
        window.location.href = "${pageContext.request.contextPath}/shop/goods?PageNumber=" + currentPage + "&PageSize=" + pagesize + "&name=" + $("#searchname").val();
    }

    //修改
    function edit(id) {
        $("#editModal").modal("show");
        <c:forEach items="${GoodsData.list}" var="goods">
        if (id ==${goods.goodsId}) {
            $("#eidtid").val(${goods.goodsId});
            $("#eidtpicture").val("${goods.goodsPic}");
            $("#eidtgoodname").val("${goods.goodsName}");
            $("#eidtdescription").val('${goods.goodsDesc}');
            $("#eidtstate").val("${goods.goodsStatus}");
            $("#eidttype").val(${goods.typeId});
            $("#eidtattribute").val("${goods.attributeList}");
            $("#eidtprice").val(${goods.goodPrice});
            $("#eidtstock").val(${goods.goodsStock});
            $("#eidtdiscount").val(${goods.discount});
            $("#editcreatetime").val("${goods.createTime}");
            $("#editupdatetime").val("${goods.updateTime}");
        }

        </c:forEach>
    }

    //ajax提交
    function edit_do() {

        //截取路径后面的图片名

        if (confirm("确定修改?")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/shop/goods/modify",
                method: "post",
                dataType: "json",
                data: {
                    goodsId: document.querySelector("#eidtid").value,
                    goodsPic: document.querySelector("#eidtpicture").value,
                    goodsName: $("#eidtgoodname").val(),
                    goodsDesc: $("#eidtdescription").val(),
                    goodsStatus: $("#eidtstate").val(),
                    typeId: $("#eidttype").val(),
                    attributeList: $("#eidtattribute").val(),
                    goodPrice: $("#eidtprice").val(),
                    goodsStock: $("#eidtstock").val(),
                    discount: $("#eidtdiscount").val(),
                    createTime: $("#editcreatetime").val(),
                    updateTime: $("#editupdatetime").val()

                },
                success: function (data) {
                    if (1 == JSON.stringify(data["message"])) {
                        window.location.reload()
                        alert("修改成功")
                    }
                },
                error: function (error) {
                    alert("修改失败！")

                }
            })
        }
    }

</script>
<%--//商品删除--%>
<script>
    function addGoods() {
        $("#addModal").modal("show");

    }

    function add_do() {
        if (confirm("确定添加？？")) {
            var file = $("#file")[0].files[0];
            var name = $("#addGoodsName").val();
            var desc = $("#addDescription").val();
            var status = $("#addStatus").val();
            var type = $("#addType").val();
            var attribute = $("#addAttribute").val();
            var price = $("#addPrice").val();
            var stock = $("#addStock").val();
            var discount = $("#addDiscount").val();
            var deleted = $("#addDeleted").val();
            var create = $("#addCreatetime").val();
            var update = $("#addUpdatetime").val();
            var formData = new FormData();
            formData.append("file", file);
            formData.append("goodsName", name);
            formData.append("goodsStatus", status);
            formData.append("goodsDesc", desc);
            formData.append("typeId", type);
            formData.append("attributeList", attribute);
            formData.append("goodPrice", price);
            formData.append("goodsStock", stock);
            formData.append("discount", discount);
            formData.append("deleted", deleted);
            formData.append("createTime", create);
            formData.append("updateTime", update);
            $.ajax({
                url: "${pageContext.request.contextPath}/shop/goods/insert",
                method: "post",
                dataType: "json",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (1 == JSON.stringify(data["message"])) {
                        window.location.reload();
                        alert("添加成功");
                    }
                },
                error: function (error) {
                    alert("添加失败");
                }
            });
        }
    }
    function deleteGoods(id) {
        if (confirm("确定删除？？？？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/shop/goods/delete",
                method: "post",
                dataType: "json",
                data: {
                    goodsId: id,
                },
                success: function (data) {
                    if (1 == JSON.stringify(data["message"])) {
                        window.location.reload();
                        alert("删除成功");
                    }
                },
                error: function (error) {
                    alert("删除失败");
                }
            });
        }

    }
</script>
<%----%>
<script>
    function shopGoods(id) {
        if (confirm("确定购买")) {
            $.ajax({
                url: "",
                method: "post",
                dataType: "json",
                data: {
                    goodsId: id,
                },
                success: function (data) {
                    if (1 == JSON.stringify(data["message"])) {
                        window.location.reload();
                        alert("购买成功");
                    }
                },
                error: function (error) {
                    alert("购买失败");
                }
            });
        }
    }
</script>

<%--//修改 保存图片--%>
<script>
    function eidtpic(id) {
        window.id = id;
        var str = ""
        var modal = window.document.getElementById("modalbody")
        $("#picModal").modal("show");
        <c:forEach items="${GoodsData.list}" var="goods">
        if (id ==${goods.goodsId}) {

            str = "<img  title='点击更换图片' style='width: 100%;' src='${pageContext.request.contextPath}/img/${goods.goodsPic}'>"
            modal.innerHTML += str
        }


        </c:forEach>

    }

    // var allName=$("#eidtpictureFile").val();
    //
    // var index=allName.lastIndexOf("\\")+1
    //
    // var picName=allName.substring(index);

    //保存图片

    function savePicture() {
        var id = window.id

        var file = $("#picture")[0].files[0];

        var formData = new FormData();

        formData.append("file", file)
        formData.append("goodsId", id)

        $.ajax({
            url: "${pageContext.request.contextPath}/goods/savePicture",
            method: "post",
            data: formData,

            processData: false,
            contentType: false,
            dataType: "json",
            success: function (data) {
                if (1 == JSON.stringify(data["message"])) {

                    alert("修改成功")
                    location.reload();
                }

            },
            error: function (err) {
                alert(JSON.stringify(err));

            }

        })


    }

</script>

</body>
</html>
